<template>
	<div id="orders">
	    <div class="order_ding">
	      <p>&nbsp;</p>
	      <p>我的全部购物车</p>
	    </div>
	    <div class="item_div" v-for="item in datas">
	      <div class="item_top_div">
	        <span>{{item.shopName}}</span>
	      </div>
	      <div class="item_bottom_div" v-for="item1 in item.datalist">
	        <div class="item_bottom_left_div">
	          <div class="item_bottom_left_one_div">
	            <img :src="item1.imgs" />
	          </div>
	          <div class="item_bottom_left_two_div">
	            <p>{{item1.guige}}</p>
	            <p>￥{{item1.price}} x {{item1.num}}</p>
	          </div>
	        </div>
	        <div class="item_bottom_right_div">
	          <p>￥{{item1.zong}}</p>
	        </div>
	      </div>
	      <div class="item_bottom_bottom_div">
	        共计3件/1.4kg ﹀
	      </div>
	    </div>
	  </div>
</template>

<script >
	export default {
	    data() {
	      return {
	        datas: [{
	            "shopName": "沃尔玛",
	            datalist: [{
	              "guige": "番茄250g/份",
	              imgs: require("../assets/icon_order.png"),
	              price: 33.6,
	              num: 3,
	              zong: 99.9
	            }, {
	              "guige": "提子250g/份",
	              imgs: require("../assets/icon_order.png"),
	              price: 33.6,
	              num: 3,
	              zong: 99.9
	            }]
	          },
	          {
	            "shopName": "京东7FRESH七鲜",
	             datalist: [{
	              "guige": "番茄250g/份",
	              imgs: require("../assets/icon_order.png"),
	              price: 33.6,
	              num: 3,
	              zong: 99.9
	            }, {
	              "guige": "提子250g/份",
	              imgs: require("../assets/icon_order.png"),
	              price: 33.6,
	              num: 3,
	              zong: 99.9
	            }]
	          }
	        ]
	      }
	    }
	  }
</script>

<style scoped>
	  #orders {
	    background-color: #F8F8F8;
	    height: 100%;
	    position: fixed;
	    width: 100%;
	  }
	
	  * {
	    margin: 0;
	    padding: 0;
	  }
	
	  .order_ding {
	    width: 100%;
	    height: 64px;
	    text-align: center;
	    margin-bottom: 16px;
	    background: #FFFFFF;
	  }
	
	  .order_ding p {
	    font-family: PingFangSC-Regular;
	    font-size: 16px;
	    color: #333333;
	    padding-bottom: 20px;
	  }
	
	  .item_div {
	    background: #FFFFFF;
	    margin-bottom: 16px;
	    margin-left: 18px;
	    margin-right: 18px;
	    border-radius: 4px;
	    padding-left: 16px;
	    padding-right: 16px;
	    padding-bottom: 16px;
	  }
	
	  .item_bottom_div {
	    margin-bottom: 16px;
	  }
	
	  .item_bottom_bottom_div {
	    margin-top: 16px;
	    margin-left: 16px;
	    margin-right: 16px;
	    height: 28px;
	    background: #F5F5F5;
	    text-align: center;
	    font-family: PingFangSC-Light;
	    font-size: 14px;
	    color: #999999;
	    line-height: 28px;
	  }
	
	  .item_div .item_top_div {
	    height: 54px;
	    line-height: 54px;
	    display: flex;
	    justify-content: space-between;
	  }
	
	  .item_bottom_left_div {
	    display: flex;
	    justify-content: space-between;
	  }
	
	  .item_bottom_left_two_div :nth-child(1) {
	    margin-bottom: 6px;
	  }
	
	  .item_div .item_top_div :nth-child(1) {
	    font-size: 16px;
	    color: #333;
	  }
	
	  .item_div .item_top_div :nth-child(2) {
	    font-size: 14px;
	    color: #999;
	  }
	
	  .item_div .item_bottom_div {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	  }
	
	  .item_div .item_bottom_div .item_bottom_left_div .item_bottom_left_one_div img {
	    width: 46px;
	    height: 46px;
	    margin-right: 16px;
	  }
	
	  .item_div .item_bottom_div .item_bottom_left_div .item_bottom_left_two_div :nth-child(1) {
	    font-family: PingFangSC-Medium;
	    font-size: 14px;
	    color: #333333;
	    text-align: left;
	  }
	
	  .item_div .item_bottom_div .item_bottom_left_div .item_bottom_left_two_div :nth-child(2) {
	    font-size: 14px;
	    color: #E93B3B;
	    margin-bottom: 2px;
	  }
	
	  .item_div .item_bottom_div .item_bottom_right_div :nth-child(1) {
	    font-family: PingFangSC-Regular;
	    font-size: 14px;
	    color: #000000;
	    text-align: right;
	  }
</style>
